<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GraphiQL - pg_graphql</title>
    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.0.6/graphiql.min.css" />
  </head>

  <body style="margin: 0">
    <div id="graphiql" style="height: 100vh"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/graphiql@3.0.6/graphiql.min.js"
    ></script>
    <script>
      // Custom fetcher for PostgREST GraphQL function
      const fetcher = async (graphQLParams) => {
        const response = await fetch("http://localhost:3001/rpc/graphql", {
          method: 'POST',
          headers: {
            'Accept': 'application/vnd.pgrst.object+json;nulls=stripped',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            query: graphQLParams.query,
            variables: graphQLParams.variables || {},
            operationName: graphQLParams.operationName || null,
            extensions: null
          })
        });

        return response.json();
      };

      const defaultQuery = `# Welcome to pg_graphql!
# Try this query:

query {
  accountCollection {
    edges {
      node {
        id
        email
        createdAt
        blogCollection {
          edges {
            node {
              id
              name
              description
            }
          }
        }
      }
    }
  }
}`;

      const root = ReactDOM.createRoot(document.getElementById("graphiql"));
      root.render(React.createElement(GraphiQL, {
        fetcher: fetcher,
        query: defaultQuery
      }));
    </script>
  </body>
</html>
